<script setup lang="ts">
import LoginFooterCom from '@/components/loginFooterCom.vue';
import { ref } from 'vue';
import type { Ref } from 'vue';


const checked: Ref<boolean> = ref(false)
function onClickLeft(){
    history.back()
}

import { useRouter } from 'vue-router';
const router=useRouter()
function mobileFn(){
    router.push('/login/mobile')
}
</script>
<template>
    <div v-if="$route.path=='/login'" class="content">
        <div class="header"   >
            <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="nr">
            <p>登录应用名称</p>
            <span class="start">开始趣味学习体验</span>
            <van-button color="#265AE8">
                <img src="https://cdn7.axureshop.com/demo2023/2246171/images/04-%E7%99%BB%E5%BD%95/%E5%BD%A2%E7%8A%B6_u112.svg"
                    alt="">
                <span>微信登录</span>
            </van-button>
            <van-button style="color: #000;" color="#EDEEF0" class="phoneLogin" @click="mobileFn">手机号登录</van-button>
            <van-checkbox v-model="checked" name="a">同意 <span>用户协议 、隐私政策</span>和 <span>儿童保护政策</span></van-checkbox>
        <LoginFooterCom></LoginFooterCom>
        </div>

    </div>
    <router-view v-else></router-view>
</template>
<style lang="scss" scoped>
.nr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 14vw;

    .start {
        margin-top: 2vw;
        margin-bottom: 14vw;
    }

    .phoneLogin {
        margin-top: 4vw;
        margin-bottom: 10vw;
    }

    .van-checkbox-group {
        span {
            color: #265AE8;
        }
    }
}

.nr p {
    font-size: 0.2rem;
}

.van-button {
    width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    line-height: 44px;

    img {
        width: 0.22rem;
        height: 0.2rem;
        margin-right: 2vw;
        margin-top: 0.12rem;
    }
}


</style>